<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ScrollTab</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" href="../css/ydui.css?rev=@@hash"/>
    <link rel="stylesheet" href="../css/demo.css"/>
    <script src="../js/ydui.flexible.js"></script>
</head>
<body>
<section class="g-flexview">

    <header class="m-navbar">
        <a href="tabs.html" class="navbar-item"><i class="back-ico"></i></a>
        <div class="navbar-center"><span class="navbar-title">ScrollTab</span></div>
    </header>

    <section class="g-scrollview">

        <div class="m-scrolltab" data-ydui-scrolltab>
            <div class="scrolltab-nav">
                <a href="javascript:;" class="scrolltab-item">
                    <div class="scrolltab-icon"><i class="demo-icons-category1"></i></div>
                    <div class="scrolltab-title">空调</div>
                </a>
                <a href="javascript:;" class="scrolltab-item">
                    <div class="scrolltab-icon"><i class="demo-icons-category2"></i></div>
                    <div class="scrolltab-title">冰箱</div>
                </a>
                <a href="javascript:;" class="scrolltab-item">
                    <div class="scrolltab-icon"><i class="demo-icons-category3"></i></div>
                    <div class="scrolltab-title">洗衣机</div>
                </a>
                <a href="javascript:;" class="scrolltab-item">
                    <div class="scrolltab-icon"><i class="demo-icons-category4"></i></div>
                    <div class="scrolltab-title">热水器</div>
                </a>
                <a href="javascript:;" class="scrolltab-item">
                    <div class="scrolltab-icon"><i class="demo-icons-category5"></i></div>
                    <div class="scrolltab-title">厨房大家电</div>
                </a>
                <a href="javascript:;" class="scrolltab-item">
                    <div class="scrolltab-icon"><i class="demo-icons-category6"></i></div>
                    <div class="scrolltab-title">厨房小家电</div>
                </a>
                <a href="javascript:;" class="scrolltab-item">
                    <div class="scrolltab-icon"><i class="demo-icons-category7"></i></div>
                    <div class="scrolltab-title">生活家电</div>
                </a>
                <a href="javascript:;" class="scrolltab-item">
                    <div class="scrolltab-icon"><i class="demo-icons-category8"></i></div>
                    <div class="scrolltab-title">风扇</div>
                </a>
            </div>
            <div class="scrolltab-content">
                <div class="scrolltab-content-item">
                    <strong class="scrolltab-content-title">空调</strong>
                    <div style="height: 300px;background-color: gray;"></div>
                </div>
                <div class="scrolltab-content-item">
                    <strong class="scrolltab-content-title">冰箱</strong>
                    <div style="height: 300px;background-color: blue;"></div>
                </div>
                <div class="scrolltab-content-item">
                    <strong class="scrolltab-content-title">洗衣机</strong>
                    <div style="height: 300px;background-color: yellow;"></div>
                </div>
                <div class="scrolltab-content-item">
                    <strong class="scrolltab-content-title">热水器</strong>
                    <div style="height: 300px;background-color: green;"></div>
                </div>
                <div class="scrolltab-content-item">
                    <strong class="scrolltab-content-title">厨房大家电</strong>
                    <div style="height: 300px;background-color: saddlebrown;"></div>
                </div>
                <div class="scrolltab-content-item">
                    <strong class="scrolltab-content-title">厨房小家电</strong>
                    <div style="height: 300px;background-color: darkgoldenrod;"></div>
                </div>
                <div class="scrolltab-content-item">
                    <strong class="scrolltab-content-title">生活家电</strong>
                    <div style="height: 300px;background-color: indianred;"></div>
                </div>
                <div class="scrolltab-content-item">
                    <strong class="scrolltab-content-title">风扇</strong>
                    <div style="height: 300px;background-color: aqua;"></div>
                </div>
            </div>
        </div>

    </section>

</section>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="../js/ydui.js"></script>
</body>
</html>
